<template>
  <van-icon
    class-prefix="iconfont iconshoucang"
    name="extra"
    :color="value ? 'yellow' : ''"
    @click="collectClick"
  />
</template>

<script>
import { collectArticle, deleteCollectArticle } from '@/api/article'

export default {
  name: 'Collect',
  components: {},
  props: {
    value: {
      type: Boolean,
      required: true
    },
    artId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    async collectClick() {
      try {
        if (this.value) {
          // 已收藏,取消收藏
          await deleteCollectArticle(this.artId)
        } else {
          // 未收藏,点击收藏
          await collectArticle(this.artId)
        }
        //  console.log(this.value)
        this.$emit('input', !this.value)
        // 改变value数据不是即时的
        this.$toast.success(!this.value ? '收藏成功' : '取消收藏')
      } catch (error) {
        this.$toast.fail('更改收藏状态失败,请稍后重试!')
      }
    }
  },
  filter: {},
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped></style>
